<template>
  <h1>员工列表练习</h1>
  <input type="text" placeholder="请输入员工姓名" v-model="e.name">
  <input type="text" placeholder="请输入员工工资" v-model="e.salary">
  <input type="text" placeholder="请输入员工岗位" v-model="e.job">
  <button @click="add()">点我添加</button>
  <hr>
  <table border="1px" style="border-collapse: collapse">
    <tr>
      <th>员工编号</th>
      <th>员工姓名</th>
      <th>员工工资</th>
      <th>员工岗位</th>1
      <th>删除</th>
    </tr>
    <tr v-for="(emp,i) in arr">
      <td>{{i+1}}</td>
      <td>{{emp.name}}</td>
      <td>{{emp.salary}}</td>
      <td>{{emp.job}}</td>

      <td><button @click="del(index)">删除</button></td>


    </tr>
  </table>
</template>

<script setup>
import {ref} from "vue";

// 定义员工信息对象和员工列表
const e = ref({ name: '', salary: '', job: '' });
const arr = ref([]);

// 添加员工的函数
const add = () => {
  //判断输入框有空值，不允许新增
  if(e.value.name.trim()=='' || e.value.salary.trim()=='' ||e.value.job.trim()==''){
    alert('请输入完整信息');
    return;
  }


  // 确保工资是数字
  if (isNaN(e.value.salary)) {
    alert('工资请输入数字！');
    return;
  }

  // 将新员工信息添加到数组中
  arr.value.push(e.value);
  // alert('添加成功！');
  // 清空表单
  e.value = {};
  // e.value = { name: '', salary: '', job: '' };
};

const del = (i)=> {
  if (confirm('是否要删除本行数据')) {
    /*删除数据，从当前行开始，删除一条数据*/
    productArr.value.splice(i, 1);
  }
}
</script>



<style scoped>

</style>